<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" >
<link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
<head th:include="admin/common/resource ::commonHead('添加课程')" ></head>
<style>
    .layui-form-item .layui-input-inline{
        margin-left: 30px;
    }
    .layui-form-item .layui-form-label{
        padding: 2px 0px;
    }
    .videos .item{
        width: 100%;
    }
    .videos .item{
        border-top: solid 1px darkgray;
        margin-top: 12px;
        overflow: hidden;
        border-right: solid 1px darkgray;
        border-bottom: solid 1px darkgray;
    }

    .videos .item .vbox,.videos .item .vtitle,.videos .item .vaction{
        width: 25%;
        margin-right: 2%;
        border-left: solid 1px darkgray;
        float: left;
        padding-left: 5px;
        padding-top: 5px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        height: 90px;

    }
    .videos .item .vtitle{
        width: 40%;
    }

    .videos .item .vaction{
        width: 25%;
        padding-top: 25px;
        padding-left: 30px;
    }
    #uploader{
        display:none;
        height: 188px;
    }
</style>
<script>
    function loadPage(url,id) {
        if(id){
            window.location.href = url+'?productId='+id;
        }else{
            window.location.href = url;
        }
    }
</script>
<head>
    <title>添加</title>
</head>

<body>

<div class="container" style="margin-left: 0px">
    <div class="toolbar btn-group-sm" role="toolbar" >
        <h6 style="margin-top: 10px;margin-bottom: 20px" > 后台管理系统 / 课程管理 / 添加章节 </h6>
        <div class="btn-group btn-group-toggle" data-toggle="buttons" style="margin-bottom: 16px">
            <label shiro:hasPermission="course:list" class="btn btn-secondary btn-sm" th:onclick="|loadPage('/admin/course/list')|">
                <input type="radio" name="options" id="option1" autocomplete="off" > 课程列表
            </label>

            <label shiro:hasPermission="course:section" class="btn btn-secondary btn-sm"  th:onclick="|loadPage('/admin/course/sections',${productId})|" >
                <input type="radio" name="options" id="option3" autocomplete="off"> 章节列表
            </label>

            <label shiro:hasPermission="section:add" class="btn btn-secondary btn-sm active" >
                <input type="radio" name="options" id="option3" checked autocomplete="off"> 添加章节
            </label>
        </div>
    </div>

    <form class="layui-form"  enctype="multipart/form-data">
        <input type="hidden" name="productId" th:value="${productId}">
        <div class="layui-form-item">
            <label class="layui-form-label">章节标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入课程标题"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="state" lay-skin="switch" checked>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">视频</label>
            <div class="layui-input-block">
                 <input onclick="dialog()" value="上传视频" type="button" name="state" class="btn btn-primary">
                 <ul class="videos" id="videos" >

                 </ul>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<div id="uploader" style="display: none" >

    <div class="layui-input-block"style="margin-top: 20px" >
        <span  > 视频标题 : </span>
        <input id="vTitle" style="width: 240px;margin-top: 4px" type="text" name="title" required  lay-verify="required" placeholder="请输入课程标题"  class="layui-input">
    </div>

    <div class="layui-input-block" style="margin-top: 20px" >
        <!--<span style="margin-top: 4px" > 视频 :</span>-->
        <button type="button" class="layui-btn" id="file">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <div class="layedit-tool-image" id="videoBox" style="margin-top:10px" ></div>
    </div>
    <input id="videoUrl" type="hidden" name="picture" value="">
</div>

</body>

<script th:src="@{/layui/layui.all.js}"></script>
<script>

    layui.use('upload', function() {
        var upload = layui.upload;

        //执行实例
        var uploadImage = upload.render({
             elem: '#file' //绑定元素
            , url: '/admin/course/upload' //上传接口
            ,accept: 'video'
            ,exts : 'mp4'
            ,auto: true
            , done: function (res) {
                console.log(res)
                //上传完毕回调
                if (res.status == 1) {
                    $("#videoUrl").val(res.path)
                    $("#videoBox").html("<video controls='controls' style='height: 80px' src='[[${imageService}]]/" + res.path + "' >")
                } else {
                    lay.msg("上传失败");
                }
            }
            , error: function () {
                //请求异常回调
            }
        });
    })

    function dialog(){

        layer.open({
            type: 1, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,
            title: '上传视频',   //标题
            area: ['420px', '320px'],   //宽高
            shade: 0.4,    //遮罩透明度
            closeBtn:0,
            content: $("#uploader"),   //支持获取DOM元素
            btn: ['确定', '取消'], //按钮组
            scrollbar: false ,    //屏蔽浏览器滚动条
            yes: function(index){   //layer.msg('yes');    //点击确定回调
            layer.close(index);
                $("#uploader").hide()
                var title  = $("#vTitle").val();
                var videoUrl = $("#videoUrl").val();
                $("#videoBox").find("video").remove();
                $("#videoUrl").val("");

                var html = '<li class="item" >\n' +
                    '                         <div class="vbox" >\n' +
                    '<video dataUrl="'+videoUrl+'" src="[[${imageService}]]/'+videoUrl+'" controls="controls" style="height: 80px" ></video>' +
                    '                         </div>\n' +
                    '                         <div class="vtitle">'+title+'</div>\n' +
                    '                         <div class="vaction">\n' +
                    '                             <input type="button" value="删除"  class="btn btn-danger deleteVideo" >\n' +
                    '                         </div>\n' +
                    '                     </li>';
                $("#videos").append(html)
                $("#vTitle").val("")

            },
            btn2: function(){  //layer.alert('aaa',{title:'msg title'});  ////点击取消回调
                $("#uploader").hide()
                var videoUrl = $("#videoUrl").val();
                if(videoUrl){
                    $.get("/admin/course/file/remove",{
                        path:videoUrl
                    },function (data) {
                        if(data.code == 1){
                            $("#videoBox").find("video").remove();
                            $("#videoUrl").val("");
                            $("#vTitle").val("")
                        }
                    })
                }
            }

        });

    }

    $(document).on("click",".deleteVideo",function () {
        $(this).parent().parent().remove();
    })

    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            console.log(data)
            var videos = new Array();
            var items = $(".item");
            $.each(items,function (k,v) {
               var url = items.eq(k).find('video').attr('dataUrl');
               var title = items.eq(k).find('.vtitle').html();
               videos.push({
                   url:url,
                   title:title
               })
            })

            var section = {
                title:data.field.title,
                status:data.field.state=='on'?1:0,
                productId:data.field.productId,
                description:data.field.description,
                videos:videos
            }
            $.ajax({
                url: "/admin/course/section/save",
                type:'post',
                contentType:'application/json;charset=UTF-8',
                data: JSON.stringify(section),
                success: function (res) {
                    if(res.code == 1){
                        layer.msg("保存成功!",function () {
                            window.location.href="/admin/course/sections?productId="+res.data.productId;
                        },2000)
                    }else{
                        layer.msg(res.msg)
                    }
                },
                error:function (err) {
                    layer.msg("保存失败")
                }
            })
            return false;
        });
    });
</script>
</html>